.product-list {
	position: relative;
	min-height: 999px;
}

.product-list__paginator {
	margin-top: 10px;
}

.product-list__content {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	border-style: solid;
	border-width: 1px 0 0 1px;
	border-color: theme-color("border");

	.product-list-item {
		position: relative;
		width: calc(25%);
		height: 390px;
		border-style: solid;
		border-width: 0 1px 1px 0px;
		border-color: theme-color("border");
		overflow: hidden;

		.product-item__content {
			padding: 16px;
			text-align: center;

			&::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: #fff;
				border: 2px solid transparent;
				box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
				border-radius: 3px;
				visibility: hidden;
			}
		}

		.product-item__img {
			margin-bottom: 8px;
			cursor: pointer;
		}

		.product-item__hidden-content {
			display: none;
			margin-top: 4px;
			padding-top: 4px;
			border-top: 1px solid theme-color("border");
		}

		.product-item__sizes {
			display: flex;
			flex-flow: row wrap;

			.product-size {
				padding: 4px 8px;
				font-size: 12px;

				&:first-of-type {
					padding-left: 2px;
				}
			}
		}

		.product-item__ratings {
			display: flex;
			flex-flow: row wrap;
			justify-content: flex-start;
			margin-top: 4px;
		}

		.product-item__comments {
			margin-top: 2px;
			margin-left: 10px;
			font-size: 12px;

			&.icon::before {
				font-size: 14px;
				font-weight: 400;
				color: color("gray-darken-1");
				margin-right: 4px;
				vertical-align: text-bottom;
			}
		}

		.product-item__button {
			margin: 8px auto 0;
			padding: 8px 14px;
			width: 100%;
			background: transparent;
			font-weight: 500;
			border: 2px solid transparent;
			background: theme-color("primary");
			color: color("white");
			border-radius: 3px;
			cursor: pointer;
			outline: 0;

			&.icon::before {
				font-size: 20px;
				margin: 0 5px 0 5px;
				vertical-align: text-bottom;
			}

			&:hover {
				background: transparent;
				color: theme-color("primary-darken-1");
				border-color: theme-color("primary");
				transition: background 0.3s ease-out;
			}
		}

		.product-item__button-float {
			display: none;
			position: absolute;
			top: 0;
			left: 0;
			padding: 10px;
			background: transparent;
			border: 0;
			outline: 0;
			cursor: pointer;

			&.icon::before {
				font-size: 20px;
				font-weight: 400;
				color: color("gray-darken-1");
			}

			&:hover {
				&.icon::before {
					color: theme-color("primary-darken-1");
				}
			}
		}

		&:hover {
			overflow: visible;

			.product-item__content {
				position: relative;
				z-index: 20;

				&::before {
					visibility: visible;
					border-color: theme-color("primary");
				}

				.product-item__img,
				.product-item__head,
				.product-item__price {
					position: relative;
					z-index: 20;
				}

				.product-item__flag,
				.product-item__button-float {
					z-index: 20;
				}

				.product-item__button-float {
					display: block;
				}

				.product-item__hidden-content {
					position: relative;
					display: block;
					z-index: 20;
				}
			}
		}
	}
}
